<template name="me">
    <view>
        <view class="UCenter-bg">
            <view class="userinfo-avatar">
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <view class="text-xl">
                <open-data type="userNickName"></open-data>
            </view>

        </view>
        <view class="padding flex text-center text-grey bg-white shadow-warp">
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-price text-orange">{{(statistics.totalAmount -
                    statistics.cashOut).toFixed(2)}}
                </view>
                <view class="margin-top-sm">账户余额</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-price text-orange">{{statistics.dailyBonus.toFixed(2)}}</view>
                <view class="margin-top-sm">今日收益</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl  text-blue">{{statistics.deviceCount}}</view>
                <view class="margin-top-sm">设备数</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-green">{{statistics.onlineCount}}</view>
                <view class="margin-top-sm">在线设备</view>
            </view>
        </view>
        <view class="cu-list menu sm-border margin-top">
            <view class="cu-item arrow">
                <navigator class="content" hover-class="none" url="../me/devices">
                    <text class="cuIcon-mobilefill text-yellow"></text>
                    <text class="text-grey ">我的设备</text>
                </navigator>
            </view>
            <view class="cu-item arrow">
                <navigator class="content" hover-class="none" url="../me/bonus">
                    <text class="cuIcon-pay text-red"></text>
                    <text class="text-grey">我的钱包</text>
                </navigator>
            </view>
            <view class="cu-item arrow">
                <navigator class="content" hover-class="none" url="../me/cooperation">
                    <text class="cuIcon-group text-blue"></text>
                    <text class="text-grey">商务合作</text>
                </navigator>
            </view>
            <view class="cu-item arrow">
                <navigator class="content" hover-class="none" url="../me/about">
                    <text class="cuIcon-info text-cyan"></text>
                    <text class="text-grey">关于快醒</text>
                </navigator>
            </view>

        </view>
    </view>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {http} from "@/utils/utils";
    import {appInfo} from "@/common/helper";

    export default Vue.extend({
        name: 'me',
        data() {
            return {
                statistics: {
                    cashOut: 0.00,
                    dailyBonus: 0.00,
                    deviceCount: 0,
                    onlineCount: 0,
                    totalAmount: 0.00,
                }
            }
        },
        methods: {
            loadData() {
                uni.showLoading({title: '数据刷新', mask: true});
                http.get("api/ma/statistics", {unionId: appInfo.session.unionid}).then((res: any) => {
                    console.log(res.data);
                    const data = res.data;
                    appInfo.statistics = res.data;
                    this.statistics = appInfo.statistics
                }).finally(() => {
                    uni.hideLoading();
                })
            }
        },
        created(): void {
            console.log("created");
            uni.$on("statistics", () => {
                console.log("更新 statistics");
                this.statistics = appInfo.statistics
            });
            this.loadData()
        }
    })


</script>

<style scoped>
    .userinfo-avatar {
        width: 128upx;
        height: 128upx;
        margin: 20upx;
        border-radius: 50%;
    }

    .UCenter-bg {
        background-color: #fbbd08;
        height: 280upx;
        display: flex;
        justify-content: center;
        padding-top: 40upx;
        overflow: hidden;
        position: relative;
        flex-direction: column;
        align-items: center;
        color: #fff;
        font-weight: 300;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }
</style>
